<!--
 * @Date: 2024-11-21 15:45:40
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2025-01-10 10:15:02
 * @Description: 
-->
<template>
  <div class="hp-design-header">
    <div class="hp-design-header-left">
      <!-- <img class="logo" :src="logo" /> -->
      <span class="title">主页设计</span>
    </div>
    <div class="hp-design-header-middle"></div>
    <div class="hp-design-header-right">
      <el-button type="primary" @click="handlePreview">预览</el-button>
    </div>
    <PreviewDrawer ref="hpPreviewRef"/>
  </div>
</template>

<script setup>
import { inject, ref } from 'vue';
import PreviewDrawer from '@hp/comps/preview/PreviewDrawer.vue'

const hpDesigner = inject('hpDesigner')
const hpPreviewRef = ref()
const handlePreview = () => {
  const layouts = hpDesigner.getDesignData()
  hpPreviewRef.value.handleOpen(layouts)
}

</script>

<style lang="scss" scoped>
.hp-design-header {
  position: relative;
  height: 56px;
  // width: 100%;
  display: flex;
  padding: 0 8px;
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--hp-color-border);
  background-color: var(--hp-color-background);
  box-shadow: 0 3px 6px 1px var(--hp-color-shadow);
  &-left {
    height: 100%;
    position: relative;
    display: flex;
    overflow: hidden;
    align-items: center;
    .logo {
      height: 30px;
      margin-right: 12px;
    }
    .title {
      font-size: 20px;
    }
  }
  &-right {
    display: flex;
    justify-content: flex-end;
  }
  &-middle {
    flex: 1;
    width: 0;
    max-width: 0;
  }
}
</style>